import React, { useState } from "react";
import { Empty, Button, SearchBar } from '@nutui/nutui-react';
import { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
import {
    ArrowLeft,
    Photograph,
} from '@nutui/icons-react'
import '../home page/home.css'
const App = () => {
    const navigate = useNavigate()
    const marginStyle = { marginLeft: '166px' };
    const list = useSelector(data => {
        return data.searchList
    })
    const [searchvalue, setValue] = useState('')
    return (
        <div className="result">
            <div className="top">
                <SearchBar
                    placeholder='请输入内容'
                    value={searchvalue}
                    clearable
                    onChange={(e) => setValue(e)}
                    shape="round"
                    left={
                        <>
                            <ArrowLeft width={20} height={20} onClick={() => navigate('/')} style={{
                            }} />
                        </>
                    }
                    right={
                        <>
                            <button onClick={() => { handlesearch() }}>搜索</button>
                        </>
                    }
                    rightIn={
                        <Photograph
                            width={16}
                            height={16}
                        />
                    }
                />
            </div>
            {list.length !== 0
                ? list.map(ele => {
                    return <div className="list-item" key={ele._id} style={{ width: '170px', marginRight: '10px' }}>
                        <img src={ele.img} style={{ height: '100%', width: '100%' }} />
                        <p style={{ fontWeight: '800' }}>{ele.title}</p>
                        <p style={{ paddingLeft: '100px', fontWeight: 'bold' }}>{Math.floor(ele.num / 10 + 11)}已收藏</p>
                        <h3>￥{ele.num}</h3>
                    </div>
                })
                : <div>
                    <Empty
                        description="暂无数据"
                        style={{ marginTop: '200px' }} />
                    <Button type="primary" fill="outline" style={marginStyle}
                        onClick={() => navigate('/Search')}>
                        返回
                    </Button>
                </div>}
        </div>
    );
};
export default App;
